<template>
  <div style="background-color: #fff;min-height: 100vh;padding: 10px 20px;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="屈光档案" name="first">
          <first-report ref="firstDialog"></first-report>
        </el-tab-pane>
        <el-tab-pane label="近视监测" name="second">
          <second-report ref="secondDialog"></second-report>
        </el-tab-pane>
        <el-tab-pane label="角塑初诊" name="third">
          <third-report ref="thirdDialog"></third-report>
        </el-tab-pane>
        <el-tab-pane label="角塑复查" name="fourth">
          <fourth-report ref="fourthDialog"></fourth-report>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  
  import FirstReport from './components/FirstReport'
  import SecondReport from './components/SecondReport'
  import ThirdReport from './components/ThirdReport'
  import FourthReport from './components/FourthReport'

  export default {
    data() {
      return {
        activeName: 'first',

        personInfo: {},
        optometry: {},
        checkDataValues: [],
        nationalList: [],
        refractiveOption: []
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    components: {
      FirstReport,
      SecondReport,
      ThirdReport,
      FourthReport
    },
    created(){
      this.personId = this.$route.query.id
      this.$nextTick(() => {
        this.$refs.firstDialog.init(this.personId)
      })
    },
    methods: {
      handleClick(tab,event){
        this.$nextTick(() => {
          this.$refs[tab.name+'Dialog'].init(this.personId)
        })

      }
    }
  }
</script>

<style>
  @media print {
    .noprint {
      display: none !important;
    }
  }
</style>
<style lang="scss" scoped>
  .print-moudle {
    margin-bottom: 20px;
  }

  .print-title {
    font-size: 18px;
    font-weight: 700;
  }
</style>
